<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue基本语法</title>
    <style>
        #a{
            border:1px solid red;
            width: 500px;
            height: 100px;
            text-align: center;
            line-height: 100px;
        }
        table{
            border-collapse: collapse;
            border:3px solid darkslategray;
            text-align: center;
        }
        td{
            border:1px solid darkslategray;
        }
        .active{
            color:red
        }
        .hasError{
            background-color: lemonchiffon;
        }
        .text-danger{
            background-color: blue;
        }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

</head>
<body>
    <div id="d1">
        实例1：{{message}} <br>
        <!--v-model 代表双向数据绑定-->
        实例2：<input type="text" v-model="message"> <br>

        <!--v-on: 绑定事件，可以简化为@-->
        <input type="button" value="增加" @click="addNum">
        <input type="button" value="减少" @click="reduceNum"> <br>
        num:{{num}} <br>

        <!--prevent 代表阻止默认事件发生-->
        <a href="http://www.baidu.com" @click.prevent="sayHallo">到百度</a> <br>

        <!--stop阻止事件冒泡-->
        <div id="a" @click="hallo('a')">
            <input type="button" value="按钮" @click.stop="hallo('按钮')">
        </div>

        <!--按钮修饰符keyup,keydown-->
        <input type="button" value="回车1" @keyup.13="hallo('回车方式1')"> <br>
        <input type="button" value="回车2" @keyup.enter="hallo('回车方式2')"> <br>
        <input type="text"  @keydown.ctrl.shift.c="hallo('方式1：')"> <br>
        <input type="text"  @keydown.ctrl.shift.67="hallo('方式2：')"> <br>

        <!-- v-for遍历数组,v-if增加判断条件-->
        <table>
            <tr>
                <td>序号</td>
                <td>学号</td>
                <td>姓名</td>
                <td>性别</td>
                <td>年龄</td>
                <td>住址</td>
            </tr>
            <tr v-for="(st,index) in studs" :key="st.sid" v-if="index > 1">
                <td>{{index}}</td>
                <td>{{st.sid}}</td>
                <td>{{st.sname}}</td>
                <td>{{st.sex}}</td>
                <td>{{st.age}}</td>
                <td>{{st.addr}}</td>
            </tr>
        </table>

        <!--v-if与v-show区别：前者将层彻底删除，后者只是使用了display:none来隐藏了层-->
        v-if:
        <div v-if="show">
            你好！
        </div> <br>
        v-show:
        <div v-show="show">
            你好！
        </div>

        <!--v-if,v-else-if，v-else结构-->
        <div v-if="type === 'A'">
            A
        </div>
        <div v-else-if="type === 'B'">
            B
        </div>
        <div v-else-if="type === 'C'">
            C
        </div>
        <div v-else>
            Not A/B/C
        </div>

        <!--v-bind：绑定属性-->
        v-bind用法1=>绑定数组:
        <div :class="isActive">v-bind用法一</div>
        v-bind用法2=>绑定对象:
        <div :class="{active:hasActive,'text-danger':hasError}">v-bind用法二</div>
    </div>

</body>
</html>
<script>
    var vue = new Vue({
        el:'#d1',
        data:{
            message:'Hello,Vue!',
            num:1,
            studs:[
                {sid:1001,sname:'张三',sex:'男',age:20,addr:'上海'},
                {sid:1002,sname:'李四',sex:'男',age:21,addr:'杭州'},
                {sid:1003,sname:'王五',sex:'女',age:22,addr:'广州'},
            ],
            show:false,
            type:'g',
            isActive:['active','hasError'],
            hasActive:false,
            hasError:true,
        },
        methods:{
            // 增加num的值
            addNum(){
                this.num++
            },
            // 减少num的值
            reduceNum(){
                this.num--
                if(this.num < 1){
                    this.num = 1
                }
            },
            // 弹出框
            sayHallo(){
                console.log('你好!')
            },
            // div a 的点击事件
            hallo(v){
                console.log("你好，",v)
            },
        }
    })
</script>